import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks';
import rehypeHighlight from 'rehype-highlight';
import rehypeRaw from 'rehype-raw';
import 'highlight.js/styles/github.css';
import './MarkdownRenderer.css';

interface MarkdownRendererProps {
  content: string;
  className?: string;
  allowHtml?: boolean;
  showLineNumbers?: boolean;
  maxHeight?: string;
  enableCopy?: boolean;
}

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
  content,
  className = '',
  allowHtml = true,
  showLineNumbers = false,
  maxHeight = 'none',
  enableCopy = false
}) => {
  const handleCopy = () => {
    navigator.clipboard.writeText(content);
  };

  return (
    <div className={`markdown-renderer ${className}`} style={{ maxHeight }}>
      {enableCopy && (
        <div className="markdown-toolbar">
          <button 
            className="copy-button"
            onClick={handleCopy}
            title="复制内容"
          >
            📋 复制
          </button>
        </div>
      )}
      
      <div className="markdown-content">
        <ReactMarkdown
          remarkPlugins={[remarkGfm, remarkBreaks]}
          rehypePlugins={allowHtml ? [rehypeRaw, rehypeHighlight] : [rehypeHighlight]}
          components={{
            // 自定义标题样式
            h1: ({ children }) => (
              <h1 className="markdown-h1">{children}</h1>
            ),
            h2: ({ children }) => (
              <h2 className="markdown-h2">{children}</h2>
            ),
            h3: ({ children }) => (
              <h3 className="markdown-h3">{children}</h3>
            ),
            h4: ({ children }) => (
              <h4 className="markdown-h4">{children}</h4>
            ),
            h5: ({ children }) => (
              <h5 className="markdown-h5">{children}</h5>
            ),
            h6: ({ children }) => (
              <h6 className="markdown-h6">{children}</h6>
            ),
            
            // 自定义段落样式
            p: ({ children }) => (
              <p className="markdown-p">{children}</p>
            ),
            
            // 自定义代码块样式
            code: ({ node, inline, className, children, ...props }) => {
              const match = /language-(\w+)/.exec(className || '');
              return !inline && match ? (
                <pre className="markdown-code-block">
                  <code className={className} {...props}>
                    {children}
                  </code>
                </pre>
              ) : (
                <code className="markdown-inline-code" {...props}>
                  {children}
                </code>
              );
            },
            
            // 自定义表格样式
            table: ({ children }) => (
              <div className="markdown-table-wrapper">
                <table className="markdown-table">{children}</table>
              </div>
            ),
            
            // 自定义引用样式
            blockquote: ({ children }) => (
              <blockquote className="markdown-blockquote">
                {children}
              </blockquote>
            ),
            
            // 自定义列表样式
            ul: ({ children }) => (
              <ul className="markdown-ul">{children}</ul>
            ),
            ol: ({ children }) => (
              <ol className="markdown-ol">{children}</ol>
            ),
            li: ({ children }) => (
              <li className="markdown-li">{children}</li>
            ),
            
            // 自定义链接样式
            a: ({ href, children }) => (
              <a 
                href={href} 
                className="markdown-link"
                target="_blank" 
                rel="noopener noreferrer"
              >
                {children}
              </a>
            ),
            
            // 自定义图片样式
            img: ({ src, alt }) => (
              <img 
                src={src} 
                alt={alt} 
                className="markdown-image"
                loading="lazy"
              />
            ),
            
            // 自定义分割线样式
            hr: () => <hr className="markdown-hr" />,
            
            // 自定义强调样式
            strong: ({ children }) => (
              <strong className="markdown-strong">{children}</strong>
            ),
            em: ({ children }) => (
              <em className="markdown-em">{children}</em>
            ),
            
            // 自定义删除线样式
            del: ({ children }) => (
              <del className="markdown-del">{children}</del>
            ),
            
            // 自定义任务列表样式
            input: ({ type, checked, ...props }) => {
              if (type === 'checkbox') {
                return (
                  <input
                    type="checkbox"
                    checked={checked}
                    readOnly
                    className="markdown-checkbox"
                    {...props}
                  />
                );
              }
              return <input type={type} {...props} />;
            }
          }}
        >
          {content}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default MarkdownRenderer;
